CSS [attribute$=”value”] Selector
The [attribute$=”value”] Selector This selector is used to select all the elements whose attribute value ends with the specified value. The value doesn’t need to be a whole word.
Example:
<!DOCTYPE html>
<html>
<head>
<title>Attribute selector</title>
<style>
[class$="gfg"] {
color: green;
font-size: 40px;
font-weight: bold;
text-align: center;
}
[class$="geeks"] {
font-size: 17px;
text-align: center;
margin-top: 0px;
}
</style>
</head>
<body>
<div class="gfg">w3wiki</div>
<div Class="w3wiki">
A computer science portal for geeks
</div>
<div class="geeks">
w3wiki is coding platform
</div>
</body>
</html>
Output:
CSS Attribute Selector
The CSS Attribute Selector is a very useful approach that targets elements based on their specific attributes or attribute values. This allows for precise styling of HTML elements that share common attributes, enhancing the consistency and efficiency of your CSS code. Lets see how to work with CSS Attribute Selector.
Syntax:
[attribute]{
/* Styles*/
}
// OR
element [attribute] {
/* Styles*/
}
// OR
[attribute ="value "]
{
/* Styles*/
}
There are several types of attribute selectors which are discussed below:
Contact Us